<template>
  <div class="inputb">
      <!-- 输入框 -->
    <div class="searchs">
      <!-- icon图片 -->
        <router-link to="/classify"><van-icon class="default-icon" name="arrow-left" /></router-link>
      <van-search  class="search-content" left-icon="" v-model="value" right-icon="search" placeholder="请输入搜索关键词" @change="detailclassify" />
      <div @click="detailclassify">搜索</div>
    </div>

  </div>
</template>
<script>
export default {

  data() {
    return {
      value: '',
      resData:"",
    }
  },
  mounted(){
// this.detailclassify()
  },
  methods: {
     detailclassify() {
      this.$store
        .dispatch({
          type: "detailclassify",
          keywords:this.value,
        })
        .then((data) => {
          this.resData = data;
          // console.log(resData);
        });
    },
  },
}
</script>

<style  lang="less">
.inputb{
.searchs {
  display: flex;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #eee;
  align-items: center;
  justify-content: center;
}
.default-icon {
  font-size: 30px;
  color: #999;
}

.search{
  font-size: 20px;
}
.search-content{
  width: 75%;
    height: 35px;
}
.van-field__right-icon .van-icon{
    font-size: 20px;
}
.van-field__control{
  background-color: #fff;
}
.van-search__content{
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}
}

</style>

